import React, {useEffect, useState} from 'react'

function useToolsModule() {
  const [toolsModule, setToolsModule] = useState()
  useEffect(() => {
    System.import("@jichen/tools").then(setToolsModule)
  }, [])
  return toolsModule
}

const About = () => {
  const toolsModule = useToolsModule()
  useEffect(() => {
    let subjection = null
    if(toolsModule) {
      toolsModule.sayHello('react')
      subjection = toolsModule.sharedSubject.subscribe(console.log)
    }
    return () => subjection && subjection.unsubscribe()
  }, [toolsModule])
  return (
    <div>
      About Works
      <button onClick={() => toolsModule.sharedSubject.next('请注意')}>广播</button>
    </div>
  )
}

export default About